<template>
  <el-container>
    <el-header height="160px">
      <div class="headerImg">
        <img id="logo" src="../assets/img/collegeLogo.png"/>
        <el-divider direction="vertical"></el-divider>
        <label style="color: white; font-size: xx-large">校友之家</label>
      </div>
      <div class="nav">
        <el-menu
          mode="horizontal"
          background-color="#003362"
          text-color="#fff"
          :default-active="activeRoute"
          router
          active-text-color="#ffd04b">
          <el-menu-item index="/home">首页</el-menu-item>
          <el-submenu index="newsNotice">
            <template slot="title">新闻公告</template>
            <el-menu-item index="/newsList">校园新闻</el-menu-item>
            <el-menu-item index="/noticeList">通知公告</el-menu-item>
          </el-submenu>
          <el-menu-item index="/activity">校友活动</el-menu-item>
          <el-submenu index="/services">
            <template slot="title">校友服务</template>
            <el-menu-item index="/backSchool">返校申请</el-menu-item>
            <el-menu-item index="/searchAlumni">校友查询</el-menu-item>
            <el-menu-item index="/campusMap">校园地图</el-menu-item>
          </el-submenu>
          <el-submenu index="/donations">
            <template slot="title">回馈母校</template>
            <el-menu-item index="/donationOnline">在线捐赠</el-menu-item>
            <el-menu-item index="/otherDonation">其他捐赠方式</el-menu-item>
          </el-submenu>
          <el-menu-item index="/about">关于我们</el-menu-item>

          <el-dropdown class="avatar" @command="handleCommand">
            <span v-show="isLogin">
              {{isLogin ? currentUser.nick : ''}}
              <el-avatar :size="55" :src="isLogin ? 'api/'+currentUser.avatarUrl : ''"></el-avatar>
            </span>
            <el-dropdown-menu>
              <el-dropdown-item command="personalCenter">个人中心</el-dropdown-item>
              <el-dropdown-item command="logout">注销登录</el-dropdown-item>
            </el-dropdown-menu>
            <div class="login" v-show="!isLogin">
            <a href="/#/login">校友用户？请登录</a>
            </div>
          </el-dropdown>
        </el-menu>
      </div>
    </el-header>
    <el-container class="mainContent">
      <el-aside width="260px" v-show="activeRoute!=='/home'">
        <div class="asideContents">
          <h3 style="color: white; padding: 10px 15%; font-weight: inherit">导航链接</h3>
          <div class="asideList">
            <el-card body-style="padding: 8px">
              <div v-for="(item,index) in breadList" :key="index" >
                <router-link :to="{path: item.path}">{{item.meta.title}}</router-link>
              </div>
            </el-card>
          </div>
        </div>
      </el-aside>
      <el-main id="mainElement" style="min-height: 800px">
        <el-breadcrumb separator-class="el-icon-arrow-right" v-show="activeRoute!=='/home'">
          <el-breadcrumb-item
            v-for="(item, index) in breadList"
            :key="index"
            :to="{ path: item.path }">
            {{item.meta.title}}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <keep-alive include="HomePage,NewsList,NoticeList,Activity,CampusMap,About">
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>
    <el-footer height="160px">
      <label>版权所有 Copyright ©2022 广西师范大学职业技术师范学院</label><br/>
      <label>学校地址：广西壮族自治区桂林市七星区育才路15号-职师学院</label><br/>
      <label>联系电话：0773-5834868</label><br/>
      <label>邮 编：541004</label>
    </el-footer>
  </el-container>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                title: '首页',
                circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                isLogin: false,
                currentUser: {},
                breadList: []
            }
        },
        watch: {
          $route(){
              this.getBreadcrumb();
              this.handleAsideShow();
          }
        },
        methods: {
            getBreadcrumb(){
              let matched= this.$route.matched;
              if(!this.isHome(matched[0])){
                  matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
              }
              this.breadList=matched;
            },
            isHome(route){
                if(route.name==='index'){
                    route.path='/home';
                    return true;
                }
                return false;
            },
            handleAsideShow() {   //控制侧边栏的显示与否
                const mainElement = document.getElementById('mainElement');
                let route=this.$route.fullPath;
                if (route !== '/home') {
                    mainElement.style.marginLeft = "0";
                } else {
                    mainElement.style.marginLeft = "10%";
                }
            },
            handleCommand(command) {
                switch (command) {
                    case 'personalCenter':
                        let routerUrl=this.$router.resolve({path: '/personalCenter'});
                        window.open(routerUrl.href,'_blank');
                        break;
                    case 'logout':
                        this.$confirm('确认注销登录吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(()=>{
                            this.isLogin=false;
                            sessionStorage.clear();
                            this.$message.error('已注销登录！');
                        });
                        break;
                    default:
                        this.$message.error("无效指令");
                }
            },
            isUserLogin(){
                const userInfo = sessionStorage.getItem("currentUser");
                let currentUser = JSON.parse(userInfo);
                if(currentUser){
                    this.isLogin=true;
                    if(!currentUser.avatarUrl){
                        currentUser.avatarUrl=this.circleUrl;
                    }
                }else{
                    this.isLogin=false;
                }
                this.currentUser=currentUser;
            }
        },
        created(){
          this.getBreadcrumb();
        },
        computed:{
          activeRoute(){
              return this.$route.fullPath;
          }
        },
        mounted() {
            this.isUserLogin();
        }
    }
</script>

<style scoped>
  .el-aside {
    margin-left: 10%;
  }

  .el-card {
    margin-left: 8%;
    border-radius: 0;
    line-height: 30px;
  }

  .asideContents {
    background-color: #003262;
    margin-top: 45px;
  }

  .el-header {
    background-color: #0057A7;
    width: 100%;
    padding: 0;
  }

  .headerImg {
    height: 100px;
  }

  .el-breadcrumb {
    height: 60px;
    line-height: 60px;
    font-size: small;
    margin-left: 6%;
  }

  .nav {
    width: 100%;
  }

  #logo {
    padding-left: 15%;
    padding-top: 10px;
  }

  .el-menu {
    padding-left: 30%;
    font-size: medium;
  }

  .el-main {
    margin-right: 10%;
    margin-left: 10%;
    padding: 0;
  }

  .el-footer {
    background-color: #082140;
    color: burlywood;
    text-align: center;
    line-height: 30px;
    padding: 20px 0;
  }

  .avatar {
    float: right;
    margin-right: 1%;
  }
  .avatar span{
    color: white;
  }
  .login{
    font-size: 15px;
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
  }
  .login:hover{
    background-color: #00294E;
  }
  .login a{
    text-decoration: none;
    color: red;
  }
  .login a:hover{
    color: chartreuse;
  }
  .mainContent{

  }
  .asideList a{
    text-decoration: none;
    color: cadetblue;
    margin-left: 20px;
  }
</style>
